<template>
  <div class="select-category">
    <!-- <slot></slot> -->
    <!-- <div class="catalogue">
        <span>123</span>
    </div> -->
    <ul :class="['category-ul', 'ul_li--' + mode]">
      <li v-for="(item, index) in tags" :key="index">
        <a href="javascript:">
          <em
            @click="selectCategory(item.value, index,item)"
            :class="{ active: index === selected }"
            >{{ item.content }}</em>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "selectCategory",
  props: {
    categories: {
      type: Array,
      default: () => [],
    },
    mode: {
      type: String,
      default: "vertical",
    },
    replaceFields: {
      type: Object,
      default: () => ({
        value: "value",
        content: "content",
      }),
    },
  },
  watch: {
    categories: {
      immediate: true,
      handler(categories) {
        categories.map(item => {
          let temp = {
            'value' : item[this.replaceFields.value],
            'content' : item[this.replaceFields.content]
          }
          this.tags.push(temp)
        })
      },
    },
  },
  data() {
    return {
      selected: 0,
      tags: []
    };
  },
  methods: {
    selectCategory(value, index, data) {
      // console.log(id);
      this.selected = index;
      this.$emit("change", value, data);
    },
  },
};
</script>
<style lang="less" scoped>
a {
  text-decoration: none;
  color: rgb(139, 136, 136);
}
em {
  display: inline-block;
  font-style: normal;
  cursor: pointer;
  min-width: 60px;
}
ul li {
  list-style: none;
}
.select-category {
  width: 100%;
  display: flex;
}
.catalogue {
  display: inline-block;
}
.category-ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
}
.ul_li--vertical {
  flex-direction: column;
}
.ul_li--horizontal {
  flex-direction: row;
}
.category-ul li {
  padding: 2px 5px;
  // border: 1px solid red;
  border-radius: 20px;
  // margin: 0 10px;
  height: 26px;
  line-height: 20px;
}
.category-ul li::after {
  content: "|";
  font-size: 12px;
  color: rgb(190, 191, 192);
  margin-left: 8px;
}
.category-ul li:last-child::after {
  content: "";
}
.category-ul em:hover {
  border-radius: 20px;
  color: rgb(37, 37, 37);
}
.category-ul em.active {
  border-radius: 20px;
  color: rgb(209, 29, 29);
  background: rgb(236, 191, 191);
}
</style>